<nav aria-label="Page navigation" th:with="size=${#lists.size(data.rows)}">
    <ul class="flex items-center -space-x-px h-10 text-base">
      <li>
            <a href="javascript:void(0)" th:data-page-box="${pageId}"  class="mock-page-a rounded-lg mr-1 flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 border-separate dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">1</a>
       </li>
      <li  th:if="${size>20&&size<101}"
        th:each="i:${#numbers.sequence(2,size%20==0?(size/20):(size/20+1))}">
        <a href="javascript:void(0)"  th:text="${i}" th:data-page-box="${pageId}"  class="mock-page-a mr-1 flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">2</a>
      </li>
    </ul>
  </nav>